
<template>
  <div class="AdviceDetail" v-if="data.id">
    <div class="main">
      <div class="header">
        <span class="tag"> {{ data.typeName }}</span>
        <span class="title"> {{ data.title }}</span>
      </div>
      <div class="msg">
        <div class="item">
          <span class="label dark">领衔代表:</span> {{ data.primaryUserInfoId && data.primaryUserInfoId.name }}
        </div>
        <div class="item">
          <span class="label dark">联名代表:</span> {{ Array.isArray(data.agreeUserInfoIds) && data.agreeUserInfoIds.map(item=> item.name).join(' ') }}
        </div>
        <div class="item">
          <span class="label dark">提案时间:</span>  {{ formatDate(new Date(data.adviceTime), 'yyyy-MM-dd HH:mm') }}
        </div>
      </div>
      <pre class="content" v-html="data.content" />
      <div class="msg">
        <div class="item">
          <span class="label">督办级别:</span> {{ data.superviseStatusName }}
        </div>
        <div class="item">
          <span class="label">办理进度:</span> {{ data.statusName }} <span class="item-btn" hover-class="hover" hover-start-time="0" hover-stay-time="0" @click="handleGoToProcess(data)">点击查看办理进度</span>
        </div>
        <div class="item">
          <span class="label">更新时间:</span> {{ formatDate(new Date(data.updateTime), 'yyyy-MM-dd HH:mm') }}
        </div>
      </div>
    </div>
    <div class="appraise-form" v-if="data.canScore || data.alreadyScore" :class="{ 'is-view': data.alreadyScore}">
      <div class="item">
        <div class="label">办理满意度: </div>
        <div class="wrap">
          <div class="item-form">
            <div class="item-form-label">
              对办理的总体评价满意度：
            </div>
            <div class="item-form-form">
              <van-radio-group :value="appraiseForm.scoreJson.general" @change="handleChange1">
                <van-radio name="A" v-if="!data.alreadyScore || appraiseForm.scoreJson.general === 'A'">A.满意</van-radio>
                <van-radio name="B" v-if="!data.alreadyScore || appraiseForm.scoreJson.general === 'B'">B.基本满意</van-radio>
                <van-radio name="C" v-if="!data.alreadyScore || appraiseForm.scoreJson.general === 'C'">C.不满意</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="item-form">
            <div class="item-form-label">
              对办理态度的评价满意度：
            </div>
            <div class="item-form-form">
              <van-radio-group :value="appraiseForm.scoreJson.attitude" @change="handleChange2">
                <van-radio name="A" v-if="!data.alreadyScore || appraiseForm.scoreJson.attitude === 'A'">A.满意</van-radio>
                <van-radio name="B" v-if="!data.alreadyScore || appraiseForm.scoreJson.attitude === 'B'">B.基本满意</van-radio>
                <van-radio name="C" v-if="!data.alreadyScore || appraiseForm.scoreJson.attitude === 'C'">C.不满意</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="item-form">
            <div class="item-form-label">
              对办理结果的评价满意度：
            </div>
            <div class="item-form-form">
              <van-radio-group :value="appraiseForm.scoreJson.result" @change="handleChange3">
                <van-radio name="A" v-if="!data.alreadyScore || appraiseForm.scoreJson.result === 'A'">A.满意</van-radio>
                <van-radio name="B" v-if="!data.alreadyScore || appraiseForm.scoreJson.result === 'B'">B.基本满意</van-radio>
                <van-radio name="C" v-if="!data.alreadyScore || appraiseForm.scoreJson.result === 'C'">C.不满意</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="label">评语建议：</div>
        <div class="item-form">
          <div class="wrap" v-if="data.alreadyScore">
            <div class="text">
              {{ appraiseForm.comment }}
            </div>
          </div>
          <CommonTextarea
            v-else
            v-model="appraiseForm.comment"
            placeholder="请输入您宝贵的意见"
            placeholder-style="font-size: 12px; color: #999;"/>
        </div>
      </div>
    </div>
    <div
      v-if="data.canScore && !data.alreadyScore"
      class="btn"
      hover-class="hover"
      hover-start-time="0"
      hover-stay-time="0"
      @click="handleSubmit">确认提交</div>
  </div>
</template>

<script>
import transformTichText from '@/utils/transformTichText'
import api from '@/api'
import { formatDate } from '@/utils'
import CommonTextarea from '@/components/CommonTextarea'

export default {
  components: {
    CommonTextarea,
  },
  data () {
    return {
      data: {},
      formatDate,
      appraiseForm: {
        comment: '',
        scoreJson: {
          general: '',
          attitude: '',
          result: '',
        },
      },
    }
  },
  onLoad (option) {
    this.id = option.id
    this.getData()
  },
  onShareAppMessage () {
    return {
      title: this.data.title,
      imageUrl: '',
      query: {
        id: this.id,
      },
    }
  },
  methods: {

    async getData () {
      const { result } = await api.getAdviceDetail({ id: this.id })
      result.content = transformTichText(result.content)
      this.data = result
      if (this.data.alreadyScore) {
        this.appraiseForm = {
          comment: this.data.comment,
          scoreJson: this.data.scoreJson,
        }
      }
    },
    handleGoToProcess (item) {
      uni.navigateTo({
        url: `/pages/adviceProcess/index?id=${item.id}`,
      })
    },
    handleChange1 (e) {
      this.appraiseForm.scoreJson.general = e.detail
    },
    handleChange2 (e) {
      this.appraiseForm.scoreJson.attitude = e.detail
    },
    handleChange3 (e) {
      this.appraiseForm.scoreJson.result = e.detail
    },
    async handleSubmit () {
      await api.adviceAppraise({
        id: this.id,
        ...this.appraiseForm,
      })
      uni.showModal({
        title: '成功',
        content: '评价成功',
        showCancel: false,
      })
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.AdviceDetail {
	min-height: 100vh;

	.main {
		padding: 20px 15px;
		background: #fff;

		.header {
			.tag {
				display: inline-block;
				padding: 0 2px;
				border: 1px solid #d1272f;
				border-radius: 3px;
				line-height: 15px;
				font-size: $fz-xs;
				color: #d1272f;
				transform: translateY(-2px);
			}

			.title {
				margin-left: 5px;
				line-height: 22px;
				font-weight: bold;
				font-size: $fz-l;
				color: #333;
			}
		}

		.msg {
			margin-top: 10px;

			.item {
				margin-top: 6px;
				line-height: 22px;
				font-size: $fz-m;
				color: #999;

				.label {
					margin-right: 10px;
					color: #333;

					&.dark {
						color: #999;
					}
				}

				.item-btn {
					margin-left: 10px;
					line-height: 20px;
					text-decoration: underline;
					font-size: $fz-m;
					color: #d1272f;

					&.hover {
						opacity: .8;
					}
				}
			}
		}

		.content {
			margin: 16px;
			line-height: 21px;
			font-size: $fz-m;
			color: #333;
		}
	}

	.appraise-form {
		margin-top: 10px;
		padding: 12px 15px;
		background: #fff;

		.item {
			&:not(:last-child) {
				margin-bottom: 10px;
			}

			.label {
				line-height: 20px;
				font-weight: 500;
				font-size: 14px;
				color: #333;
			}

			.wrap {
				margin-top: 10px;
				padding: 15px 20px;
				border: 1px solid #e6e6e6;
				border-radius: 5px;
			}

			.item-form {
				&:not(:last-child) {
					margin-bottom: 10px;
				}

				.item-form-label {
					line-height: 24px;
					font-weight: 500;
					font-size: 12px;
					color: #333;
				}

				& /deep/ .CommonTextarea {
					.label {
						margin: 0;
					}

					textarea {
						box-sizing: border-box;
						min-height: 104px;
						margin-top: 10px;
						padding: 2px 12px;
						font-size: 12px;
						color: #333;
					}
				}

				.item-form-form {
					van-radio-group {
						display: flex;
						justify-content: space-between;
					}

					/deep/ .van-radio {
						display: inline-flex;
						margin-left: -28rpx;

						.van-radio__icon-wrap {
							transform: scale(.6) translate(15px, 3px);

							.van-radio__icon.van-radio__icon--round.van-radio__icon--checked {
								border-color: #e51e1e;
								background-color: #e51e1e;
							}
						}

						.van-radio__label {
							line-height: 24px;
							font-weight: 500;
							font-size: 12px;
							color: #999;
						}
					}
				}
			}
		}

		&.is-view {
			.item-form {
				display: flex;

				&:not(:last-child) {
					margin-bottom: 5px;
				}

				/deep/ .van-radio__icon-wrap {
					display: none;
				}

				.wrap {
					width: 100%;

					.text {
						font-weight: 500;
						font-size: 12px;
						color: #999;
					}
				}
			}
		}
	}

	.btn {
		margin: 23px 12px;
		border-radius: 5px;
		line-height: 46px;
		text-align: center;
		font-weight: 500;
		font-size: $fz-xl;
		color: #fff;
		background: #d1272f;

		&.hover {
			opacity: .8;
		}
	}
}
</style>
